<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../static/layui/css/layui.css"  media="all">
  <script src="../static/jquery-3.5.1.min.js"></script>
  <script src="../static/layui/layui.js" charset="utf-8"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
          
              
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>修改个人信息（不填默认不改动）</legend>
</fieldset>
 
<form class="layui-form layui-form-pane" action="" lay-filter="example">
	
  
  <div class="layui-form-item">
	<div class="layui-inline">
		<label class="layui-form-label">密码</label>
		<div class="layui-input-inline">
		  <input type="password" name="password" lay-verify="password" placeholder="请输入当前密码(必填项)" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-form-mid layui-word-aux">8-20位密码，可以是数字和大小写字母</div>
	</div>
  </div>
  
 <div class="layui-form-item" >
    <div class="layui-inline">
      <label class="layui-form-label">新账号</label>
      <div class="layui-input-inline">
        <input type="tel" name="newPhoneNumber"  placeholder="请输入新的手机号" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  
  
  <div class="layui-form-item" >
     <div class="layui-inline">
       <label class="layui-form-label">新昵称</label>
       <div class="layui-input-inline">
         <input type="text" name="nickname"  placeholder="请输入新昵称" autocomplete="off" class="layui-input">
       </div>
     </div>
   </div>
  
  <div class="layui-form-item" >
     <div class="layui-inline">
       <label class="layui-form-label">新学号</label>
       <div class="layui-input-inline">
         <input type="text" name="stuID"  placeholder="请输入新学号" autocomplete="off" class="layui-input">
       </div>
     </div>
   </div>
	
		
  <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  
  
</form>
          

<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  });
  
  //自定义验证规则
  form.verify({
	stuID: [
		/^[0-9]{10}$/
		,'学号错误'
	]
	
    ,nickname: [
		/^[a-zA-Z0-9_-]{5,20}$/
		,'昵称为5-20位，可以包含数字大小写字母和下划线'
	]
	,password: [
      /^[0-9A-Za-z]{8,20}$/
      ,'密码为8-20位，可以包含数字和大小写字母'
    ]
    
  });
  

  
  //监听提交
  form.on('submit(demo1)', function(data){
	
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
	
	$.ajax({
	  xhrFields:{withCredentials: true},
	  type: 'PUT',
	  url: "http://127.0.0.1:8000/api/v1/users/0/",
	  data: JSON.stringify(data.field),
	  dataType:"json",
	  success:function(data){
		  if(data.code==200){
			  layer.msg("信息修改成功",function(){
				  // window.location.href="http://127.0.0.1:8848/RSS/login.html".
			  })
		  }else{
			  layer.msg(data.msg);
		  }
	  }
	  
	});
	
    return false;
  });
 
  
  //表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('example');
    alert(JSON.stringify(data));
  });
  
});
</script>

</body>
</html>